<template>
  <div class="agentstatement frame_content m10">
    <div class="back_agent" style="margin-bottom: 40px">
      <div class="rea13">
        <table class="common cent">
          <thead class="tab_bg">
            <tr>
              <th colspan="2" style="background: #fff;">
                <a class="input-group date date_time1" id="datetimepicker1">
                  <el-date-picker
                    v-model="dateValue"
                    type="date"
                    size="small"
                    @change="cgAgent()"
                    placeholder="选择日期"
                  >
                  </el-date-picker>
                  <span class="input-group-addon date_span">
                    <span class="glyphicon glyphicon-calendar"></span>
                  </span>
                  <span class="date_img"></span>
                </a>
              </th>
              <th colspan="2" style="background: #fff;">
                <span class="title">代理报表</span>
                <button @click="backwater" class="btn_on1 ml allReward">
                  一键回水
                </button>
              </th>
              <th colspan="7" style="background: #fff;" class="setTh"></th>
            </tr>
            <tr>
              <th>
                <span class="ag_name">代理</span>
              </th>
              <th>重庆时时彩</th>
              <th>PK拾</th>
              <th>幸运飞艇</th>
              <th>极速赛车</th>
              <th>澳洲5</th>
              <th>澳洲10</th>
              <th>返水</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in agentstateList" :key="index">
              <td>{{ item.nickname }}({{ item.account_id }})</td>
              <td v-for="(i, index) in item.data" :key="index">{{ i }}</td>
              <td>{{ item.list }}</td>
              <td></td>
              <td>
                <span
                  @click="openLine(item)"
                  :class="['down', { up: item.status != 1 }]"
                ></span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import http from "@/utils/http";
export default {
  data() {
    return {
      dateValue: "",
      isUp: "",
      timer: ""
    };
  },
  computed: {
    ...mapState("agentstate", ["agentstateList"])
  },
  methods: {
    ...mapActions("agentstate", ["getAgentstateList", "getAgentbackList"]),
    getTime() {
      var year = new Date(new Date()).getFullYear();
      var month =
        new Date(new Date()).getMonth() + 1 < 10
          ? "0" + (new Date(new Date()).getMonth() + 1)
          : new Date(new Date()).getMonth() + 1;
      var date =
        new Date(new Date()).getDate() < 10
          ? "0" + new Date(new Date()).getDate()
          : new Date(new Date()).getDate();
      this.dateValue = year + "-" + month + "-" + date + " " + "08:00:00";
    },
    cgAgent() {
      console.log(this.dateValue);
      let time = Date.parse(new Date(this.dateValue)) / 1000;
      console.log(time);
      this.getAgentstateList(time);
    },
    // 打开下线代理
    openLine(item) {
      item.status = !item.status;
      // 还有东西没写
    },
    backwater() {
      http.post(
        "/api/rule/agent_report/back_water?token=2Q3ntNqyo5eaLmXITABb",
        {
          time: this.timer
        }
      );
    }
  },
  created() {
    this.getTime();
  },
  mounted() {
    let time = Date.parse(new Date(this.dateValue)) / 1000;
    console.log(time);
    this.timer = time;
    this.getAgentstateList(time);
  }
};
</script>

<style>
.agentstatement {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
}
.back_agent table thead {
  font-weight: bolder;
}
.date_time1 {
  position: relative;
  display: inline-block;
  width: 50%;
  height: 30px !important;
}
.agentstatement a {
  color: #08c;
  text-decoration: none;
}
.agentstatement .common tr {
  background: #dff9f9;
}
.date_input {
  width: 98%;
  height: 30px !important;
  margin-bottom: 0 !important;
}
.agentstatement .down {
  width: 40px;
  height: 16px;
  display: inline-block;
  background-image: url(../../images/down.png);
  background-size: 100% 100%;
  cursor: pointer;
}
.agentstatement .down.up {
  background-image: url(../../images/up.png);
  background-size: 100% 100%;
}
.date_span {
  position: absolute;
  left: 0;
  width: 30px;
  height: 30px;
  top: 0;
}
.input-group.date .input-group-addon span {
  cursor: pointer;
  width: 14px;
  height: 14px;
}
.date_img {
  position: absolute;
  right: 22px;
  width: 26px;
  height: 26px;
  top: 2px;
  background: url(../../images/date.png);
  background-size: 100% 100%;
}
.back_agent table th:nth-child(2),
.back_agent table td:nth-child(2) {
  color: blue;
}
.agentstatement .title {
  font-size: 160%;
  font-weight: bolder;
  color: blue;
  line-height: 40px;
}
.ag_name {
  color: #d79e24;
}
.back_agent table th:nth-child(3),
.back_agent table td:nth-child(3) {
  color: #28a68b;
}
.back_agent table th:nth-child(4),
.back_agent table td:nth-child(4) {
  color: red;
}
.back_agent table th:nth-child(5),
.back_agent table td:nth-child(5) {
  color: #38b200;
}
</style>
